<template>
  <em-swipe
    :autoplay="autoplay"
    indicator-color="white"
    :ratio="ratio"
    :radius="radius"
  >
    <em-swipe-item
      v-for="(swipe, index) in items"
      :key="index"
    >
      <em-image
        :src="swipe.url"
        fit="cover"
        width="100%"
        height="100%"
        radius="0"
      />
    </em-swipe-item>
    <template
      v-if="indicatorNumber"
      #indicator
    >
      <div
        class="number-indicator"
        :style="indicatorStyle"
      >
        <span class="number-indicator__active">{{ current + 1 }}</span>/<span class="number-indicator__length">{{ value.length }}</span>
      </div>
    </template>
  </em-swipe>
</template>
<script>
export default {
  name: 'SwipeBox',
  props: {
    value: {
      type: Array,
      required: true
    },
    autoplay: {
      type: [String, Number],
      default: 1000
    },
    loop: {
      type: Boolean,
      default: true
    },
    ratio: {
      type: [Number, Boolean],
      default: 0
    },
    radius: {
      type: [String, Number],
      default: 0
    },
    gutter: {
      type: [String, Number],
      default: 0
    },
    indicatorColor: {
      type: String,
      default: ''
    },
    indicatorNumber: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      current: 0,
      num: 0 // 这个是用来计数，防止用户连续点击出现setTimeout重复调用导致用户体验差
    }
  },

  computed: {
    scaleClass() {
      if (this.ratio !== false) {
        return 'swipe-scale'
      }
      return ''
    },
    itemStyle() {
      const styles = {}
      if (this.ratio !== false) {
        const ratio = Math.abs(this.ratio)
        if (ratio !== 0) {
          styles['--scalebox-ratio'] = `${100 / ratio}%`
        }
      }
      return styles
    },
    gutterStyle() {
      if (this.gutter) {
        const gutter = this.addUnit(this.gutter)
        return {
          padding: `0 ${gutter}`
        }
      }
      return null
    },
    indicatorStyle() {
      const styles = {}
      if (this.indicatorColor) {
        styles['color'] = this.indicatorColor
      }
      if (this.gutter) {
        const gutter = this.addUnit(this.gutter)
        return {
          'padding-right': `${gutter}`
        }
      }
      return styles
    },
    items() {
      if (this.value.length > 0) {
        const data = []
        for (let i = 0, c = this.value.length; i < c; i++) {
          if (typeof this.value[i] === 'string') {
            data.push({
              url: this.value[i]
            })
          } else if (typeof this.value[i] === 'object') {
            data.push(this.value[i])
          }
        }
        console.log(data)
        return data
      }
      return []
    }
  },

  methods: {
    onChange(index) {
      this.current = index
    },
    addUnit(value) {
      if (value) {
        return /^\d+(\.\d+)?$/.test(value) ? value + 'px' : value
      }
      return undefined
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.number-indicator {
  position: absolute;
  bottom: 10px;
  right: 12px;
  color: #fff;
  letter-spacing: 2px;
  font-family: 'RemingaTitlingRegular';
  &__length {
    opacity: 0.8;
    font-size: 80%;
  }
  &__active {
    font-size: 140%;
    opacity: 1;
  }
}
</style>
